<template>
  <div class="body">
    <div class="header">
      <span>统计分析/异常预警统计表</span>
    </div>
    <div class="content">
      <div class="search">
        <!-- 搜索框 -->
        <div class="searchBtn">
          <!-- 日期选择器 -->
          <span class="date" style="font-size: 13px;">日期：</span>
          <!-- value-format="YYYY-MM-DD"timestamp -->
          <el-date-picker v-model="newDate" type="date" placeholder="请选择" size="large" style="width: 200px;height: 40px;"
            :disabled-date="disabledDate"  value-format="YYYY-MM-DD"/>
          <!-- 提交，重置 -->
          <el-button type="primary" @click="query" style="font-size: 13px;">查询</el-button>
          <el-button size="default" @click="reset" style="font-size: 13px;">重置</el-button>
        </div>
        <!-- 导出按钮 -->
        <div class="formBtn">
          <el-button type="primary" size="default" @click="exportX" style="font-size: 13px;">导出EXCEL</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="form">
        <div class="formTable">
          <!-- :max-height="360" -->
          <!-- .slice((currentPage - 1) * pageSize, currentPage * pageSize) -->
          <el-table :data="abnormalPeopleData" border style="width: 100%;font-size: 13px;"
            :header-cell-style="{ background: '#f9f9f9', color: '#606266', height: '45px' }" table-layout="auto">
            <el-table-column align="center" prop="date" label="日期" />
            <el-table-column align="center" prop="abnormalAlerts" label="异常预警人数" />
          </el-table>
        </div>
        <div class="paging">
          <!-- pager-count="4" 最大页码数 -->
          <el-config-provider>
            <el-pagination background layout="prev, pager, next" :total="abnormalPeopleData.length" :current-page="currentPage"
              :page-size="pageSize" @current-change="handleCurrentChange" />
          </el-config-provider>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import axios from '@/util/http'
import { parseTime } from '@/util/date'
import { defineComponent, ref, onBeforeMount, onMounted, reactive, toRefs, computed } from 'vue';
import exportExcel from '@/util/Excel';
export default defineComponent({
  name: 'AbnormalPeople',
  setup() {
    /* 从后端拿取数据打印到页面 */
    const state = reactive({
      abnormalPeopleData: [] as any,
      date: ''
    })
    onBeforeMount(() => {
      axios({
        method: 'post',
        url: 'abWarningStatistics/findabnormals',
        params: {
          currentPage: currentPage.value
        }
      })
        .then((response) => {
          state.abnormalPeopleData = response.data.data.districtSysAbnormalList
          console.log(response.data.data.districtSysAbnormalList);   
        })
    })

    /* 查询   
    1.设置可选时间为今天之前 */
    let newDate = ref('')
    const disabledDate = (time: Date) => {
      return time.getTime() > Date.now()
    }
    /* 发送查询的请求 */
    const query = () => {
      console.log(newDate.value);
      axios({
        method: 'post',
        url: 'abWarningStatistics/findabnormalbydate',
        params: {
          currentPage: currentPage.value,
          currentDate: newDate.value
        }
      })
        .then((response) => {
          console.log(response.data.data);
          state.abnormalPeopleData = [response.data.data.districtSysAbnormal]
        })
    }

    /* 重置 */
    const reset = () => {
      newDate.value = ''
      axios({
        method: 'post',
        url: 'abWarningStatistics/findabnormals',
        params: {
          currentPage: currentPage.value
        }
      })
        .then((response) => {
          state.abnormalPeopleData = response.data.data.districtSysAbnormalList
          console.log(response.data.data.districtSysAbnormalList);
        })
    }

    /* 导出表格 */
    const titleArr = ['序号', '日期', '异常预警人数']
    const exportX = () => {
      exportExcel(state.abnormalPeopleData, '异常预警统计表', titleArr, 'biao')
      console.log('成功');
    }

    /* 时间转换，将时间戳转换为y-m-d打印在页面  */
    // const formatterDate = (row) => {
    //   // console.log(row);
    //   return parseTime(row.date, '{y}-{m}-{d}')
    // }

    /* 分页 */
    //默认开始页数
    const currentPage: any = ref(1)
    //每页的数据条数
    const pageSize: any = ref(10)
    //数据总数
    // const total = state.abnormalPeopleData
    const handleCurrentChange = (newPage: any) => {
      axios({
        method: 'post',
        url: 'district_sys_statistics/findabnormals',
      })
        .then((response) => {
          state.abnormalPeopleData = response.data.data
          console.log(response.data.data);
        })
    }
    return {
      // formatterDate,
      ...toRefs(state),
      //查询
      newDate,
      disabledDate,
      query,
      //重置
      reset,
      //导出
      titleArr,
      exportX,
      //分页
      currentPage,
      pageSize,
      handleCurrentChange
    }
  }
})
</script>

<style lang="less" scoped>
/deep/ .el-input_wrapper {
  font-size: 13px;
}

/deep/.el-input {
  font-size: 13px;
}

.body {
  width: 100%;
  height: 100%;
}

.header {
  width: 100%;
  height: 5%;
  font-size: 13px;
}

.content {
  width: 100%;
  height: 94%;
  border: 1px solid rgb(225, 222, 222);
  border-radius: 5px;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

//搜索框和导出按钮
.search {
  margin-top: 20px;
  width: 94%;
  height: 22%;
}

.search button {
  width: 100px;
  height: 40px;
}

.searchBtn button {
  margin-left: 20px;
}

.formBtn button {
  margin-top: 30px;
  margin-bottom: 30px;
}

//表格
.form {
  width: 94%;
  height: 78%;
}

.formTable {
  height: 88%;
  display: flex;
  justify-content: center;
}

.paging {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
